<template>
	<view>
		<u-mask :show="show">
			<view class="wrap">
				<view class="bg">
					<view class="ver">版本：{{version}}</view>
					<u-gap height="24"></u-gap>
					<scroll-view scroll-y="true" class="info">
						<u-parse :html="html"></u-parse>
					</scroll-view>
					
					<view class="progress">
						<u-line-progress striped striped-active active-color="#EEBC80" :percent="progress" v-show="installing"></u-line-progress>
					</view>
					<my-btn gold size="sm" @click="update">立即更新</my-btn>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				version: '',
				html: '',
				pkgUrl: '',
				wgtUrl: '',
				installing: false,
				progress: 0
			};
		},
		mounted() {
			this.checkUpdate()
		},
		methods: {
			checkUpdate() {
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
					let { name, version } = wgtinfo
					this.$u.get('/app/update', { name, version }).then(res => {
						let result = res.data.result
						if (result.update) {
							this.version = result.version
							this.html = result.update_content
							this.pkgUrl = result.pkgUrl
							this.wgtUrl = result.wgtUrl
							this.show = true
						}
						this.$emit('update', result.update)
					})
				})
				// #endif
			},
			update() {
				if (!this.installing) {
					// #ifdef APP-PLUS
					if (this.pkgUrl) {
						plus.runtime.openURL(this.pkgUrl);
					} else if (this.wgtUrl) {
						let task = uni.downloadFile({
							url: this.wgtUrl,
							success: res => {
								plus.runtime.install(res.tempFilePath, {
									force: false
								}, () => {
									this.installing = false
									this.progress = 0
									plus.runtime.restart();
								}, err => {
									this.$msg('安装失败...')
								})
							}
						})
						this.installing = true
						task.onProgressUpdate((res) => {
							this.progress = res.progress
						});
					}
					// #endif
				} else {
					
				}
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		position: relative;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bg {
		width: 592rpx;
		height: 922rpx;
		background: url(../../static/images/update-bg.png);
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 340rpx 0 50rpx 0;
	}
	.ver {
		color: white;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
	}
	.info {
		width: 500rpx;
		height: 270rpx;
		padding: 32rpx 16rpx;
		overflow-y: auto;
	}
	.progress {
		width: 500rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
	}
</style>
